<template>
  <lay-card style="height: 100%">
    <lay-container>
      <lay-row space="30" style="margin-top: 15px">
        <lay-col md="4">
          <lay-input v-model="queryForm.taskId" size="sm" class="queryForm">
            <template #prepend>任务ID</template>
          </lay-input>
        </lay-col>
        <lay-col md="4">
          <lay-input v-model="queryForm.className" size="sm" class="queryForm">
            <template #prepend>方法名</template>
          </lay-input>
        </lay-col>
        <lay-col md="4">
          <lay-input v-model="queryForm.description" size="sm" class="queryForm">
            <template #prepend>描述</template>
          </lay-input>
        </lay-col>
        <lay-col md="4">
          <lay-button type="normal" @click="queryParams">查询</lay-button>
          <lay-button @click="resetFrom">重置</lay-button>
        </lay-col>
      </lay-row>
      <lay-row space="20">
        <lay-col md="24">
          <lay-table
            :page="page"
            :height="'500px'"
            :columns="columns"
            :loading="loading"
            :data-source="dataSource"
            @change="change"
          >
          <template v-slot:toolbar>
            <lay-row space="10">
              <lay-col md="18">
                <h3>定时任务列表</h3>
              </lay-col>
            </lay-row>
          </template>
          <template v-slot:operator="{ row }">
            <lay-button size="xs" type="normal" @click="changeJobStatus(row)">{{ row.status === 1 ? '停止':'启用' }}</lay-button>
            <lay-button size="xs" type="danger" @click="deleteParams(row)">删除</lay-button>
          </template>
        </lay-table>
        </lay-col>
      </lay-row>
    </lay-container>
  </lay-card>
</template>

<script lang="ts">
export default {
  name: "Jobs"
}
</script>

<script lang="ts" setup>
import {h, onMounted, reactive, ref} from "vue";
import {notify} from "../../../untils/tip";
import {
  countParamsApi,
  deleteParamsApi,
  queryParamsApi,
} from "../../../api/market/basic";
import {layer} from "@layui/layui-vue";
import ConfigParams from "../../../components/Market/ConfigParams.vue";
import {
  countJobsApi,
  deleteJobApi,
  queryJobsApi,
  resumeJobApi,
  stopJobApi,
  unloadJobApi, updateJobApi
} from "../../../api/market/Job";

// 初始变量
const loading = ref(false);
const page = reactive({ current: 1, limit: 10, total: 10 });



// 查询参数
const queryForm = reactive({
    taskId: null,
    className: null,
    description: null,
    pageNo: 0,
    pageSize: 10,
});

const columns = ref([
    { title:"编号", width: "5%", key:"id", fixed: "left", sort: "desc" },
    { title:"任务ID", width: "10%", key:"taskId" },
    { title:"Corn表达式", width: "10%", key:"cron" },
    { title:"方法名", width: "25%", key:"className" },
    { title:"参数ID", width: "5%", key:"paramsId" },
    { title:"启用状态", width: "5%", key:"status" },
    { title:"描述", width: "20%", key:"description" },
    { title:"操作", width: "20%", customSlot:"operator", key:"operator", fixed: "right" }
]);
const dataSource = ref([]);

// 关联策略的下拉列表
const strategies = ref([]);

// 页面加载前的运行方法
onMounted(()=>{
  queryParams();
});


// 函数方法
const queryParams = () => {
  page.current = 1;
  countParams();
  loadDataSource();
}

const change = () => {
  loading.value = true;
  setTimeout(() => {
    loadDataSource();
    loading.value = false;
  }, 1000);
};

const resetFrom = () => {
  queryForm.taskId = null;
  queryForm.className = null;
  queryForm.description = null;
  queryForm.pageSize = 10;
  queryForm.pageNo = 0;
};

const countParams = async () => {
  let {data, code, message} = await countJobsApi(queryForm)
  if(code === 200){
    page.total = data;
  }else {
    notify('fail', message);
  }
};

const loadDataSource = async () => {
  dataSource.value = [];
  queryForm.pageNo = (page.current - 1)*page.limit;
  queryForm.pageSize = page.limit;
  let {code, data, message} = await queryJobsApi(queryForm)
  if(code === 200){
    dataSource.value = data;
  }else {
    notify('fail', message);
  }
};

const deleteParams = (row: any) => {
    layer.confirm("你确定要删除吗",
        {
            btn: [
                {text:'确定', callback: (id) => {
                    deleteJob(row);
                    layer.close(id); }
                },
                {text:'取消', callback: (id) => {
                    layer.close(id); }
                }
            ]
        }
    );
};

const deleteJob = async (row: any) => {
    await unloadJobApi({taskId: row.taskId});
    let {data, code, message} = await deleteJobApi({id: row.id});
    if(code === 200){
      await loadDataSource();
      notify('success', message);
    }else {
      notify('fail', message);
    }
};

const stopJob = async (row: any) => {
  let {data, code, message} = await stopJobApi({taskId: row.taskId});
  if(code === 200){
    notify('success', message);
  }else {
    notify('fail', message);
  }
};

const resumeJob = async (row: any) => {
  let {data, code, message} = await resumeJobApi({taskId: row.taskId});
  if(code === 200){
    notify('success', message);
  }else {
    notify('fail', message);
  }
};

const changeJobStatus = async (row: any) => {
    const status = ref();
    if(row.status === 1){
      row.value = 0;
      status.value = 0;
      await stopJob(row);
    }else {
      row.value = 1;
      status.value = 1;
      await resumeJob(row);
    }
    let {data, code, message} = await updateJobApi({id: row.id, status: status.value});
    if(code === 200){
      await loadDataSource();
      notify('success', message);
    }else {
      notify('fail', message);
    }
}

</script>

<style scoped>

</style>